<template>
  <div>
    <h1 align="center">房价信息管理</h1>
    <input type="button" value="房价新增" @click="zeng">
    <table class="table table-bordered">
      <tr>
        <td>ID</td>
        <td>名称</td>
        <td>房价</td>
        <td>早餐份数</td>
        <td>房间数量</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in list">
        <td>{{item.pid}}</td>
        <td>{{item.p_name}}</td>
        <td>{{item.p_price}}</td>
        <td>{{item.p_number}}</td>
        <td>{{item.p_num}}</td>
        <td>
          <input type="button" value="修改" @click="pupdate(item.pid)" >
        </td>
      </tr>
    </table>
    <div>
      <span>总页数:<b style="color: red;">{{totaPage}}</b></span>
      <span>总条数:<b style="color: red;">{{totaCount}}</b></span>
      <span>当前:<b style="color: red;">{{state.PageIndex}}/{{totaPage}}</b>页</span>
      <input type="button" value="首页" @click="goPage('home')">
      <input type="button" value="上一页" @click="goPage('prve')">
      <input type="button" value="下一页" @click="goPage('next')">
      <input type="button" value="尾页" @click="goPage('end')">
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, toRefs, onMounted } from 'vue';
import axios from 'axios';
import { useRouter, useRoute } from 'vue-router';
const router = useRouter();
const route = useRoute();
let data: any = reactive({
  state: {
    PageIndex:1,
    PageSize:3
  },
  list:[],
  totaPage:0,
  totaCount:0,
});
let { state,list,totaPage,totaCount } = toRefs(data);
//分页
const goPage=(str:any)=>{
  switch (str) {
    case 'home':
      if (state.value.PageIndex==1) {
        alert("已经首页了")
        state.value.PageIndex==1
        return;
      }
      state.value.PageIndex=1
      break;
      case 'prve':
      if (state.value.PageIndex==1) {
        alert("已经不能上一页了")
        state.value.PageIndex==1
        return;
      }
      state.value.PageIndex--
      break;
      case 'next':
      if (state.value.PageIndex==totaPage.value) {
        alert("已经不能上一页了")
        state.value.PageIndex==totaPage.value
        return;
      }
      state.value.PageIndex++
      break;
      case 'end':
      if (state.value.PageIndex==totaPage.value) {
        alert("已经尾页了")
        state.value.PageIndex==totaPage.value
        return;
      }
      state.value.PageIndex=totaPage.value
      break;
  }
  Show();
}
//修改
const pupdate=(id:any)=>{
   router.push("/pupdate")
}
//新增
const zeng=()=>{
  router.push("/padd")
}
onMounted(()=>{
  Show();
})
//门店显示
const Show = () => {
  let obj = {
    PageIndex:state.value.PageIndex,
    PageSize:state.value.PageSize
  };
  axios({
    url: '/api/Member/Show',
    method: 'get',
    params: obj
  })
    .then((res) => {
      console.log(res);
      list.value=res.data.data
      totaPage.value=res.data.totaPage
      totaCount.value=res.data.totaCount
    })
    .catch((err) => {
      console.log(err);
    });
};
</script>

<style scoped></style>
